{extend name='common/base'/}
{block name='css'}
<link rel="stylesheet" href="/static/frontend/css/home.css?v=1.1.1" media="all">
<link rel="stylesheet" href="/static/frontend/plugin/clock/jquery.flipcountdown.css?v=1.1.1" media="all">
{/block}
{block name='content'}
<div class="main">
    <div class="container flex">
        <div class="left margin-b-15">
            <ul class="bg-white margin-b-15">
                {foreach $column_info as $v}
                <li><a href="" title="{$v['title']}">{$v['title']}</a></li>
                {/foreach}
            </ul>
        </div>
        <div class="center margin-b-15">
            <div class="carousel-box margin-b-15">
                <!--轮播-->
                <div class="carousel-row bg-white">
                    <div class="layui-carousel carousel" data-anim="fade" data-autoplay='true'
                         data-arrow="hover" data-indicator="none" id="carousel-row" lay-filter="carousel">
                        <div carousel-item="">
                            {foreach $carousel_list as $v}
                            <div class="img-box">
                                <img class="height-100 width-100" src="{$v['img_path']}" alt="">
                                {if !empty($v['title'])||!empty($v['subtitle'])}
                                <div class="{$v['text_align']|default='text-left'}">
                                    <h3>{$v['title']}</h3>
                                    <span>{$v['subtitle']}</span>
                                </div>
                                {/if}
                            </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
                <!--小工具-->
                <div class="tools">
                    <div id="weather-v2-plugin-standard"></div>

                    <div id="time" class="time">

                    </div>
                </div>
            </div>
            <div class="article">
                <div class="title-box bg-white">
                    <a href="">最新文章</a>
                    <a href="">查看更多</a>
                </div>
                {if $article_list->isEmpty()}
                <div class="null-content bg-white margin-b-5"></div>
                {else/}
                {foreach $article_list as $k=>$v}
                {if $v['cover_count']>=0&&$v['cover_count']<3}
                <div class="bg-white article-single-img margin-b-5">
                    <div class="img-box">
                        <a href="{:url('article_read',['id'=>str_pad($v['id'],15,'0',STR_PAD_LEFT)])}">
                            <img src="{$v['cover'][0]|default='/static/frontend/img/default_img.svg'}"
                                 onerror="this.src='/static/frontend/img/default_img.svg'" alt="">
                        </a>
                    </div>
                    <div class="content">
                        <div class="title">
                            <a href="{:url('article_read',['id'=>str_pad($v['id'],15,'0',STR_PAD_LEFT)])}">{$v.title}</a>
                        </div>
                        <div class="description">
                            <p>{$v.description}</p>
                        </div>
                        <div class="article-info">
                            <div class="column">
                                <a href="{:url('article_column',['id'=>str_pad($v['id'],15,'0',STR_PAD_LEFT)])}">{$v['columnInfo']['title']}</a>
                            </div>
                            <div class="info-list">
                                         <span>
                                        <i class="icon icon-time"></i>
                                  {$v['publish_time']?:$v['create_time']}
                                    </span>
                                <span>
                                        <i class="icon icon-comment"></i>
                                        1024 条评论
                                    </span>
                                <span>
                                        <i class="icon icon-good"></i>
                                        {$v['like']} 次点赞
                                    </span>
                                <span>
                                        <i class="icon icon-watch"></i>
                                            {$v['reading_count']}  次查看
                                    </span>
                            </div>
                        </div>
                    </div>
                </div>
                {elseif $v['cover_count']>=3/}
                <div class="article-multi-img bg-white margin-b-5">
                    <div class="content">
                        <div class="title">
                            <a href="">{$v.title}</a>
                        </div>
                        <div class="description">
                            <p>{$v.description}</p>
                        </div>
                        <div class="img-box">
                            {foreach $v['cover'] as $k=>$vo}
                            {if($k<=2)}
                            <a href="">
                                <img src="{$vo}" onerror="this.src='/static/frontend/img/default_img.svg'" alt="">
                            </a>
                            {/if}
                            {/foreach}
                        </div>
                        <div class="article-info">
                            <div class="column">
                                <a href="">{$v['columnInfo']['title']}</a>
                            </div>
                            <div class="info-list">
                                         <span>
                                        <i class="icon icon-time"></i>
                                        {$v['publish_time']?:$v['create_time']}
                                    </span>
                                <span>
                                        <i class="icon icon-comment"></i>
                                        1024 条评论
                                    </span>
                                <span>
                                        <i class="icon icon-good"></i>{$v['like']} 次点赞
                                    </span>
                                <span>
                                        <i class="icon icon-watch"></i>
                                        {$v['reading_count']} 次阅读
                                    </span>
                            </div>
                        </div>
                    </div>

                </div>
                {/if}
                {/foreach}
                {/if}
            </div>
        </div>
        <div class="right margin-b-15">
            <div class="ad-box-300 margin-b-15">
                <a href="">
                    <img src="/static/frontend/img/13.jpg" alt="">
                </a>
            </div>
            {include file='/common/auth_img'/}
            {include file='/common/tag_list'/}
            {include file='/common/ranking'/}

        </div>
    </div>
</div>

<div class="container friend-link">
    <div class="title bg-white">
        友情链接 <a href="javascript:;" class="apply-link" id="apply-link" title="申请友链"><i class="icon icon-plus"></i></a>
    </div>
    <div class="link-box">
        <ul class="bg-white">
            {foreach $friend_link as $k=>$v}
            <li><a href="{$v['link']}" target="_blank" title="{$v['title']}--{$v['description']}">{$v['title']}</a></li>
            {/foreach}
        </ul>
    </div>
    <div class="margin-b-5"></div>
    <div class="link-form bg-white">
        <div class="box">
            <div class="form">
                <form action="{:url('index_friendlink')}" data-loading="1" class="layui-form" id="friend-link" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">显示名称：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="required" lay-verType="tips"
                                   lay-reqText="显示名称不能为空" placeholder="请输入显示名称,例如：傲杰笔记"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">链接地址：</label>
                        <div class="layui-input-block">
                            <input type="text" name="link" lay-verType="tips" lay-reqText="链接地址不能为空"
                                   lay-verify="required|url"
                                   placeholder="请输入链接地址,例如:https://www.52zsj.com"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">网站介绍：</label>
                        <div class="layui-input-block">
                            <input type="text" name="description"
                                   placeholder="请输入网站介绍：例如：傲杰笔记用于记录并分享开发心得，以及当下主流媒体新闻信息"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系方式：</label>
                        <div class="layui-input-block">
                            <input type="text" name="contact" lay-verType="tips" lay-reqText="联系方式不能为空"
                                   lay-verify="required"
                                   title="联系方式,请务必填写正确。本站保证绝不会随意骚扰或倒卖您的信息"
                                   placeholder="联系方式,请务必填写正确。本站保证绝不会随意骚扰或倒卖您的信息"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-block flex">
                            <input type="text" name="captcha" lay-verType="tips" lay-reqText="验证码不能为空"
                                   lay-verify="required"
                                   placeholder="请输入验证码"
                                   autocomplete="off" class="layui-input">
                            <img src="{:captcha_src()}" class="pull-right captcha-img" id=""
                                 style="cursor: pointer;width: 120px;height: 38px"
                                 onclick="this.src='/captcha.html/s/'+Math.random()" title="点击刷新" alt="captcha">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-danger" lay-submit lay-filter="submit">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="info">
                <p>申请前务必将本站信息添加至您的首页友情链接！</p>
                <p>网站名称：<em class="text-danger">傲杰笔记</em></p>
                <p>网站地址：<em class="text-danger">https://www.52zsj.com</em></p>

                <h3>申请基本要求：</h3>
                <ul>
                    <li>1、保证您的首页有本站的友情链接</li>
                    <li>2、网站能正常访问，且有备案</li>
                    <li>3、网站内容与本站有一定相关性</li>
                    <li>4、搜索引擎正常收录、无作弊行为。</li>
                </ul>
            </div>
        </div>

    </div>
</div>
{/block}

{block name='js'}

<script src="/static/frontend/plugin/axios/axios.min.js"></script>
<script src="/static/frontend/js/axios-plugin.js"></script>
<script src="/static/frontend/js/form-submit.js"></script>
<script src="/static/frontend/plugin/clock/jquery.flipcountdown.js"></script>
<script>

    $('input[name="link"]').on('focus', function () {
        let current = $(this).val();
        if (current == '') {
            $(this).val('http://');
        }
    })
    //时间插件
    $('#time').flipcountdown({speedFlip: 50, size: 'sm'});
    //友情链接
    $(".friend-link #apply-link").on('click', function () {
        $(this).parent().siblings('.link-form').fadeToggle(200);
        $(this).find('i').toggleClass('icon-plus').toggleClass('icon-minus');
    })
    //天气组件
    WIDGET = {
        CONFIG: {
            "layout": 2,
            "width": "193",
            "height": "250",
            "background": 1,
            "dataColor": "C2BCBC",
            "borderRadius": 5,
            "key": "v3cJTdybR8"
        }
    }
</script>
<script src="https://apip.weatherdt.com/standard/static/js/weather-standard-common.js?v=2.0"></script>
{/block}
